<ui:composition template="templateAdmin.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
		
	<h:head></h:head>
	
	<ui:define name="categorias">
	
		<style>			
			.ui-widget-content { border: none; padding: 5px; }			
			.ui-widget-content tr td { border: none; color: #00708C; font-family: 'Lato',sans-serif; }
			.ui-button { padding:0px; }
			/* Importante! es para que no muestre el nombre del tipo de elemento en los botones de primefaces */
			.ui-button-text { display: none; }			
			/* Importante! es para que queden los iconos en los botones de primefaces */
			.ui-widget select, .ui-widget button { font-family: 'Glyphicons Halflings'; }
		</style>

	
		<h:form id="form">
		
			<p:growl id="mensajes" showDetail="false" life="2000" sticky="true" autoUpdate="true"/>
			<h4>Nueva Categoria</h4>
			<div style="margin: 20px;">
				<div class="form-group">
					<div class="col-lg-3">
						<div class="input-group ">					
							<span class="input-group-addon">
								<span class="glyphicon glyphicon-flag"></span>
							</span>
							<p:inputText label="Nombre" value="#{subcategoriaBean.categoria.nombre}"
										 required="true" placeholder="Nombre de la categoria"
										 requiredMessage="Debe ingresar el nombre de la Categoria"
										  styleClass="form-control" />
						</div>
					</div>
					<div class="col-lg-8">
						<div class="input-group">
							<span class="input-group-addon">
								<span class="glyphicon glyphicon-tag"></span>
							</span>
							<p:inputText label="Descricpion " value="#{subcategoriaBean.categoria.descripcion}" required="false" placeholder="Descripcion de la categoria" styleClass="form-control"/>
						</div>
					</div>				
				</div>
				
	         	<p:commandButton id="regButton" 
		             actionListener="#{subcategoriaBean.postRegistroCategoria}"
		             update=":table:dataTable" process="@parent"
		             styleClass="btn btn-success glyphicon glyphicon-plus"/>
		             		             
			</div>
			       			
		</h:form>
		
		<h:form id="table">		
	
			<h4>Categorias</h4>
			<div>
			    <p:growl id="messages" showDetail="true" />		    
			    <p:dataTable id="dataTable" var="categoria" value="#{subcategoriaBean.categorias}" editable="true" sortMode="multiple" styleClass="table">
			        
			        <p:ajax event="rowEdit" listener="#{subcategoriaBean.onEditCategoria}" />			        
			        
			        <p:column sortBy="nombre" style="text-align:center;" headerText="Nombre" width="auto">		        
						<p:cellEditor>
			                <f:facet name="output">
			                    <h:outputText value="#{categoria.nombre}"/>  
			                </f:facet>
			                <f:facet name="input">
			                    <h:outputText value="#{categoria.nombre}"/>
			                </f:facet>
			            </p:cellEditor>
			        </p:column>		     
			           
			        <p:column sortBy="descripcion" style="text-align:center;" headerText="Descripcion">		        
						<p:cellEditor>
			                <f:facet name="output">  
			                    <h:outputText value="#{categoria.descripcion}" />  
			                </f:facet>
			                <f:facet name="input">
			                    <p:inputText value="#{categoria.descripcion}" itemValue="#{categoria.descripcion}" var="#{categoria.descripcion}" style="width:100%"/>  
			                </f:facet>
			            </p:cellEditor>
			        </p:column>
			        <p:column style="text-align:center;" width="40">					
						<p:rowEditor  />
			        </p:column>
			        
					<p:column style="text-align:center;" width="40">
					    <p:commandButton update="dataTable" actionListener="#{subcategoriaBean.postEliminarCategoria(categoria.nombre)}"
					     styleClass="btn btn-danger btn-sm glyphicon glyphicon-trash">
					        <p:confirm header="Confirmacion" message="¿Seguro que desea eliminar la categoria? #{categoria.nombre}" icon="ui-icon-alert"/>
					    </p:commandButton>
					    <p:confirmDialog global="true" showEffect="fade" hideEffect="explode">
					        <p:commandButton value="Si" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
					        <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>   
					    </p:confirmDialog>					    
					</p:column>
					
			    </p:dataTable>
			    <p:blockUI block="dataTable" trigger="dataTable"><i class="fa fa-refresh fa-spin"></i></p:blockUI>
		    </div>		
		</h:form>
		
	</ui:define>
</ui:composition>
